 <template>
  <div id="outDiv" :class="isFocus ? 'getFocus' : ''">
    <group class="inputGroup" :title="groupTitle">
      <div class="xInput">
        <div class="flex-h">
          <toast
            :v-model="errMsg == '' ? false :showPositionValue"
            type="text"
            :time="2000"
            width="50%"
            is-show-mask
            :text="errMsg"
          >{{errMsg}}</toast>
          <div class="flex-input">
            <img :src="pathSrc" alt />
            <input 
              v-on:focus="focusOn"
              v-on:blur="blurAdjust"
              class="flex1"
              :type="type==='txt'|| type==='yzm'?'text':txtType"
              ref="input"
              :placeholder="plvalue"
              :value="value"
              @input="$emit('getVal', $event.target.value)"
            />
			<div class="boxwes" v-show="type==='txt'&& value.length>0" @click="value=''">
              <!-- <img class="imgIcon" src="~/static/icon/com_icon_delete_gray_32.png"  alt />             -->
              <span class="imgIcon"></span>
            </div>
            <div class="boxwes" v-if="type=='pwd'" @click="tabImg">
              <i class="bg-password_icon_eye_d" v-if="ssr"></i>
              <i class="bg-password_icon_eye_s"  v-else></i>
            </div>
            <div v-if="type=='yzm'">
              <button :class="['yzm',yzmtrue?'yzmactive':'']" :style=" yzmMsg !== '发送验证码' ? 'color: #999;' : ''" v-on:click="send">{{yzmMsg}}</button>
            </div>
          </div>
        </div>
      </div>
    </group>
  </div>
</template>
 
 <script>
import { Toast, Group } from "vux";
export default {
  props: {
    errMsg: String,
    pathSrc: String,
    plvalue: String,
    value: String,
    showXx: Boolean,
    type: String,
    groupTitle: String,
    yzmtrue: {
      type: Boolean,
      default: false
    },
    yzmMsg: String
  },
  model: {
    prop: "value",
    event: "getVal"
  },
  components: {
    Toast,
    Group
  },
  data() {
    return {
      ssr: true,
      txtType: "password",
      showPositionValue: false,
      isFocus: false
    };
  },
  mounted: function() {},
  methods: {
    tabImg() {
      this.ssr = !this.ssr;
      if (this.ssr === true) {
        this.txtType = "password";
      } else {
        this.txtType = "text";
      }
    },
    clear1() {
      this.$emit("clears");
    },
    blurAdjust(e) {
      // 文本框失去焦点
      // this.isFocus = false;
      window.scroll(0,0)
      if(!this.value){      
         this.isFocus = false;
      }
    },
    focusOn() {
      // 文本框获取焦点
      this.isFocus = true;
    },
    send() {
      this.$emit("sends");
    }
  }
};
</script>
 
 
 <style scoped lang="less">
@errorColor: #ff210a;

.getFocus {
  .inputGroup /deep/ .weui-cells__title {
    color: @assistColor;
  }
	.flex-input {
    border-bottom-color: @assistColor;
  }
}

.inputGroup /deep/ .weui-cells__title {
  color: #999;
    font-size: 0.28rem;
    font-family: PingFangSC;
    font-weight: 400;
	line-height: 0.3rem;
	margin: 0;
}
.inputGroup /deep/ .weui-cells:before,
.inputGroup /deep/ .weui-cells:after,
.inputGroup .xInput {
  border: none;
  height: auto;
}
.inputGroup {
  margin-bottom: 0.3rem;
}
.inputGroup /deep/ .flex-h {
  height: auto;
  flex-direction: column !important;
  justify-content: flex-start !important;
  .yzm {
    display: inline-block;
    font-size: 0.3rem;
    color: @mainColor;
    width: 2.8rem;
    height: 0.88rem;
    line-height: 0.88rem !important;
    text-align: center;
	background: none;
    margin-left: 0.3rem;
    border: none;
	outline: none;
	font-family:PingFangSC;
  }
  .yzmactive {
    color: @mainColor;
  }
  .flex1 {
    height: 1rem;
    border-radius: 0;
    box-sizing: border-box;
  }
}

.xInput {
  width: 100%;
  height: 1rem;
  border-bottom: 0.01rem solid #eee;
  font-size: 0.3rem;
  padding-right: 0;
  padding-left: 0;
  font-family:PingFangSC;

  .boxwes {
    width: 1rem;
    height: 0.5rem;
    overflow: hidden;
    text-align: right;
    padding-top: 0.1rem;
    box-sizing: border-box;
    position: absolute;
    right: 0.2rem;
    .imgIcon {
      display: inline-block;
      width: 0.32rem;
      height: 0.32rem;
      background: url("~@/static/sprite/other_sprites.png") -4.26rem -0.1rem;
		  background-size: 4.68rem 4.08rem;
    }
  }
  .noShow {
    display: none;
  }
  .toShow {
    display: inline-block;
  }

  .errorSpan {
    padding-left: 0.5rem;
    box-sizing: border-box;
    height: 0.4rem;
    text-align: left;
    width: 100%;

    line-height: 0.4rem;

    b {
      font-size: 0.22rem;
      color: @errorColor;
    }
  }

  img {
    width: 0.3rem;
    height: auto;
  }

  input {
    width: 100%;
    padding-left: 0.2rem;
    box-sizing: border-box;
    height: 0.56rem;
    outline: none;
    border: none;
    line-height: 0.56rem;
    font-size: 0.3rem;
    color: #222;
  }
}

.xColor {
  border-bottom: 2px solid @errorColor !important;
}
.flex-input {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  position: relative;
 border-bottom: 0.01rem solid  #eee;
   padding-bottom: 0.02rem;

}


.yzm {
  font-size: 0.26rem;
  line-height: 0.6rem;
}
.send {
  color: @mainColor !important;
}
</style>
 